<template>
  <div class="handle-table-box">
    <el-table
        :data="tableData"
        stripe
        style="width: 100%; margin-top: 2vh;height: 83vh"
        border
        max-height="83vh"
        :row-class-name="null"
        empty-text="暂无数据"
    >
      <el-table-column
          fixed
          prop="flow_index"
          label="ID"
          width="100"
          align="center"
      />
      <el-table-column
          prop="flow_uploader_name"
          label="申请人"
          width="150"
          align="center"
      />
      <el-table-column
          prop="created_at"
          label="申请时间"
          width="250"
          align="center"
      >
        <template #default="{row}">
          {{ computeDate(row.updated_at) }}
        </template>
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态"
          align="center"
          width="150"
      >
        <template #default="{row}">
          <div v-if="row.status === 0">
            <el-tag type="info">
              等待处理
            </el-tag>
          </div>
          <div v-if="row.status === 1">
            <el-tag type="warning">
              正在处理
            </el-tag>
          </div>
          <div v-if="row.status === 2">
            <el-tag type="success">
              处理完成
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
          prop="operator_name"
          label="当前/最后审批人"
          align="center"
          width="150"
      />
      <el-table-column
          prop="flow_detail"
          label="理由/说明/备注"
          width="650"
          align="center"
      />
      <el-table-column
          label="操作"
          align="center"
      >
        <template #default="{row}">
          <el-button
              type="primary"
              size="small"
              @click="toHandle(row.application_id)"
          >
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <HandleDialog ref="handleRef" reloadHandle="getPendingFlow"/>
</template>

<script setup>
import {ElTable, ElTableColumn, ElTag, ElButton, ElDialog, ElMessage} from "element-plus"
import {onMounted, reactive, ref} from "vue"
import {checkPendingFlow, checkUserByRole, getUptopHandle} from "@/api"
import HandleDialog from "@/components/OA/Leave/MyHandled/HandleDialog.vue"
import emitter from "@/lib/eventBus.js"
import {useRoute, useRouter} from "vue-router"
import Message from "@/lib/Message/Message"


const route = useRoute()
const router = useRouter()

let user_info
const tableData = ref()
const handleDialogVisible = ref(false)
const handleRef = ref()
const options = ref([])
let detail_form = reactive({
  starting_date:'',
  termination_date:'',
  flow_detail:'',
  total_days:'',
  status:'',
  operator_name:'',
  copy_name:'',
})
const history_operator = ref([])

let upTop_id
let msg

onMounted(() => {
  // emitter.emit('home_menu','/OA/my-handled/all')
  emitter.emit('update','/OA/my-handled/to-handle')
  if (route.path !== '/OA/my-handled/to-handle') router.push('/OA/my-handled/to-handle')
  getUserInfo()
  getUserList()
  if(route && route.query.targetId){
    emitter.emit('update','to-handle')
    upTop_id = route.query.targetId
    msg = route.query.msg_id
    readMSG()
  } else {
    getPendingFlow()
  }
})

const getUserInfo = () => {
  user_info = JSON.parse(localStorage.getItem('syhyDocManSys'))
}

const getUserList = async () => {
  try {
    let rolename = []
    let roleUser = []
    const {data:res} = await checkUserByRole()
    const values = Object.values(res.data)
    values.forEach(value => {
      let datas = Object.values(value)
      datas.forEach(data => {
        if(typeof data === "string"){
          rolename.push(data)
        } else {
          roleUser.push(data)
        }
      })
    })
    for (let i = 0; i < 6; i++){
      options.value.push({
        label:rolename[i],
        value:null,
        children:[]
      })
      for (let j = 0; j < roleUser[i].length; j++){
        options.value[i].children.push({
              label:roleUser[i][j].user_name,
              value:roleUser[i][j].user_id,
            }
        )
      }
    }
  } catch (e) {
    console.log(e)
  }
}

const getPendingFlow = async () => {
  try {
    tableData.value = []
    const {data:res} = await checkPendingFlow({
      // const data = checkPendingFlow({
      userId : user_info.id
    })
    if(res.code === 200){
      tableData.value = res.data
    } else if (res.code === 201){
      // return ElMessage({
      //   message:'暂无未审批的流程',
      //   type:'info'
      // })
    } else {
      return ElMessage({
        message:'获取列表失败',
        type:'warning'
      })
    }
  } catch (e) {
    console.log(e)
  }
}

const toHandle = (id) => {
  handleRef.value.showDetails(id)
}

const computeDate = (date) => {
  return date.substring(0,10)
}

//已读消息
const readMSG = async () => {
  try {
    tableData.value = []
    const {data:res} = await getUptopHandle({
      userId:user_info.id,
      approve_id:upTop_id,
      msgId:msg
    })
    if (res.code === 200){
      tableData.value = res.data
    } else {
      getPendingFlow()
    }
  } catch (e) {
    console.log(e)
  }
}

//设置第一行高亮
const tableRowClassName = (row, rowIndex) => {
  if (rowIndex === 0) {
    return 'warning-row'
  }
}


</script>

<style scoped lang="less">
.handle-box{
  box-sizing: border-box;
  height: 95%;
  .leave-detail-box{
    width: 95%;
    margin: 3vh auto;
    .top{
      background-color:#fff;
      border: 1px solid rgb(238,238,238);
      //border-left: none;
      display: flex;
      flex-direction: column;
      margin-top: 2vh;
      .t1{
        width: 100%;
        font-size: 1.6vh;
        border-bottom: 1px solid rgb(238,238,238);
        height: 5vh;
        line-height: 5vh;
        display: flex;
        justify-content: space-between;
        .t1-item{
          width: 100%;
          display: flex;
          justify-content: left;
          .t1-title{
            font-weight: 600;
            text-align: center;
            width: 30%;
            background-color: rgb(250,250,250);
            border-left: 1px solid rgb(250,250,250);
            border-right: 1px solid rgb(250,250,250);
          }
          .t1-con{
            text-align: left;
            background-color: #fff;
            width: 60%;
            padding-left: 1vw;
          }
        }
      }
      .t2{
        width: 100%;
        font-size: 1.6vh;
        background-color:#fff;
        height: 5vh;
        line-height: 5vh;
        display: flex;
        .t2-item{
          width: 100%;
          display: flex;
          justify-content: left;
          .t2-title{
            font-weight: 600;
            text-align: center;
            width: 15%;
            background-color: rgb(250,250,250);
            border-left: 1px solid rgb(250,250,250);
            border-right: 1px solid rgb(250,250,250);
          }
          .t2-con{
            text-align: left;
            background-color: #fff;
            width: 60%;
            padding-left: 1vw;
          }
        }
      }
    }
    .bot{
      background-color:#fff;
      border: 1px solid rgb(238,238,238);
      //border-left: none;
      margin-top: 3vh;
      display: flex;
      flex-direction: column;
      .b1{
        display: flex;
        width: 100%;
        font-size: 1.6vh;
        border-bottom: 1px solid rgb(238,238,238);
        height: 5vh;
        line-height: 5vh;
        .b1-item{
          width: 100%;
          display: flex;
          justify-content: left;
          .b1-title{
            font-weight: 600;
            text-align: center;
            width: 49%;
            background-color: rgb(250,250,250);
            border-left: 1px solid rgb(250,250,250);
            border-right: 1px solid rgb(250,250,250);
          }
          .b1-con{
            text-align: left;
            background-color: #fff;
            width: 60%;
            padding-left: 1vw;
          }
        }
      }
      .b2{
        background-color:#fff;
        width: 100%;
        font-size: 1.6vh;
        height: 5vh;
        line-height: 5vh;
        display: flex;
        .b2-item{
          width: 100%;
          display: flex;
          justify-content: left;
          .b2-title{
            font-weight: 600;
            text-align: center;
            width: 14%;
            background-color: rgb(250,250,250);
            border-left: 1px solid rgb(250,250,250);
            border-right: 1px solid rgb(250,250,250);
          }
          .b2-con{
            text-align: left;
            background-color: #fff;
            width: 60%;
            padding-left: 1vw;
          }
        }
      }
    }
  }
}
:deep(.el-dialog__header ){
  text-align: left !important;
  font-weight: 600;
}
:deep(.el-dialog__body){
  padding: 0 !important;
}
.first_line{
  :deep(.el-table tr){
    background-color: pink !important;
  }
}
</style>
